<template>
	<z-paging ref="paging" bgColor="#F5F6FA" class="content" v-model="dataList" @query="queryList">
		<template #top>
			<view class="top-box" style="background-color: #fff;">
				<view class="box ">
					<up-tabs :scrollable="false" 
						:activeStyle="{
							color:'#F5493D',
							fontWeight:'Bold',
							fontSize:'30rpx'
						}"
						:inactiveStyle="{
							color:'#141311',
							fontSize:'30rpx'
						}"
						lineWidth="60rpx"
						lineHeight="6rpx"
						lineColor="#F5493D"
						@change="onTab"
						:list="tab"></up-tabs>
				</view>
			</view>
			
		</template>
		<view style="margin-top:16rpx">
			<my-list-gift v-if="tab_i==0" :list='dataList'></my-list-gift>
			<my-list-bonus v-else-if="tab_i==1" :list='dataList'></my-list-bonus>
			<my-list-lottery v-else :list='dataList'></my-list-lottery>
		</view>
	</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {activeCollectListApi} from '/api/public.js'
	const paging=ref(null)
	const tab_i=ref(0)
	const tab=ref([
		{
			name:'谜礼',
			id:'gift'
		},
		{
			name:'谜金',
			id:'gold_coin'
		},
		{
			name:'谜奖',
			id:'lottery'
		}
	])
	const dataList=ref([]) 
	const onTab=(e)=>{
		tab_i.value=e.index
		dataList.value=[];
		paging.value.reload()
	}
	onShow(()=>{
		if(paging.value){
			paging.value.refresh() 
		}
	})
	onLoad((obj)=>{
		
	})
	const onSearch=()=>{
		paging.value.reload()
	}
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		let res='';
		res=await activeCollectListApi({
			type:tab.value[tab_i.value].id,
			limit:pageSize,
			page:pageNo
		})
		let data=[];
		if(tab_i.value==0){
			data=res.data.map((it)=>{
				return {...it.giftInfo,join_num:it.giftInfo.crackUserList.length}
			})
		}else if(tab_i.value==1){
			data=res.data.map((it)=>{
				return {...it.goldInfo,join_num:it.goldInfo.crackUserList.length}
			})
		}else{
			data=res.data.map((it)=>{
				return {...it.lotteryInfo,lottery_num:it.lotteryInfo.joinUserList.length}
			})
		}
		paging.value.complete(data);
	}
	const goDetails=(id)=>{
		if(tab_i.value==0){
			uni.navigateTo({
				url:'../gift/details?id='+id
			})
		}else if(tab_i.value==1){
			uni.navigateTo({
				url:'../bonus/details?id='+id
			})
		}else{
			uni.navigateTo({
				url:'../lottery/details?id='+id
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	
</style>
